<template>
	<view class="main">
		<view style="padding-left: 32rpx;padding-right: 32rpx;">
			<view style="height: 108rpx;display: flex;align-items: center;">
				
				<text class="title">{{title}}</text>
				<input type="text" @input="searchPeople"  :value="phone"
				:placeholder="titleplaceholder" class="placeholder-view">
			</view>
			<view class="line"></view>
			
			<scroll-view  scroll-y="true" class="laywer-sel-popup" v-if="searchList.length>0">
				<view v-for="(item,index) in searchList" :key="index" @click="clickPeople(item)" 
				style="height: 80rpx;display: flex;align-items: center;margin-left: 32rpx;">
					<image :src="item.account.avatarPic"
						style="width: 40rpx;height: 40rpx;margin-left: 8rpx;border-radius: 40rpx;"></image>
					<text class="listview-name" style="margin-left: 2rpx;">{{item.account.realName}}</text>
					<text class="listview-name" style="margin-left: 4rpx;">{{item.account.mobile}}</text>
					
				</view>
			</scroll-view>
			
			<view class="listview" v-if="nameList.length>0">
				<view :class="index%2==1 ? 'main_item2':'main_item'" v-for="(item,index) in nameList">
					<image :src="item.account.avatarPic"
						style="width: 40rpx;height: 40rpx;margin-left: 8rpx;border-radius: 40rpx;"></image>

					<text class="listview-name" style="margin-left: 2rpx;">{{item.account.realName}}</text>
					<text class="listview-name" style="margin-left: 4rpx;">{{item.account.mobile}}</text>
					<image @click="deleteLayer(item,index)" src="../../../../static/phone/guanbi1.png"
						style="width: 32rpx;height: 32rpx;margin-left: auto;margin-right: 4rpx;"></image>
				</view>
			
			</view>
		</view>
		
		<!-- 底部 -->
		<view class="view-bottom">
			<view class="view-bottom-s">
				<view class="view-bottom-b" @click="addIt">
					确定
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import verify from '../../../utils/verifyUtils'
	let app = ''
	export default{
		data(){
			return{
				caseId:'',
				tag:'',
				role:'',
				roleUrl: '',
				
				phone:'',
				title:'',
				titleplaceholder:'',
				searchList:[],
				nameList:[]
			}
		},
		onLoad(options) {
			let _this = this
			app = getApp()
			
			_this.tag = options.tag
			_this.caseId = options.caseId
			_this.role = app.globalData.role
			_this.roleUrl = _this.$roleUrl({
				tab: _this.role
			})
			
			let title = ''
					
			if(options.tag=='lawyer'){
				title='承办律师'
				_this.titleplaceholder = '请输入律师姓名/手机号/工作组'
			}
			if(options.tag=='customer'){
				title='参与用户'
				_this.titleplaceholder = '请输入用户姓名/手机号'
			}
			_this.title = title
			uni.setNavigationBarTitle({
				title:title
			})
		},
		methods:{
			/**
			 * 输入框监听
			 */
			searchPeople(val) {
				console.log(val)
				let _this = this
				let code = val.detail.value
				_this.phone = code
				if(code.length>0){
					//查询律师选择器
					_this.getNameList(code)
				}
					
			},
			/**
			 * 查询
			 */
			async getNameList(code) {
				let _this = this
				let tags = ''
				let mode = ''
				if(_this.tag=='lawyer'){
					tags = 'lawyer'
				}else{
					tags = 'commUser'
					mode = 3
				}
				
				const res = await _this.$myRequest({
					url: `/${_this.roleUrl}/${tags}/selector/${mode}`,
					data: {
						keyword:code,
						size: 1000,
						page: 1
					},
					method: 'POST', //默认是GET
				})
				console.log(_this.title, res)
				if (res.data.code == 200) {
					let list = res.data.data
					for (var i = 0; i < list.length; i++) {
						let avatarPic = list[i]['account']['avatarPic']
						if(verify.isNotEmpty(avatarPic)){
							if(avatarPic.indexOf('http')<0){
								avatarPic = this.$imageUrls({picUrls: avatarPic})
							}
						}else{
							avatarPic = '../../../../static/phone/moren.png'
						}
						list[i]['account']['avatarPic']= avatarPic
					}
					
					_this.searchList = list
				}
			
			},
			/**
			 * @param {Object} item
			 * 选择
			 */
			clickPeople(item){
				this.nameList.push(item)
				this.searchList = []
				this.phone = ''
			},
			
			deleteLayer(item,index){
				this.nameList.splice(index,1)
			},
			
			/**
			 * 确定
			 */
			async addIt(){
				let _this = this
				let ids=[]
				for (var i = 0; i < _this.nameList.length; i++) {
					 ids.push(_this.nameList[i]['id'])
				}
				if(ids.length==0){
					uni.showToast({
						title:`请填写${_this.title}`,
						icon:"none"
					})
					return
				}
				
				
				let tags = ''
				let data={
					caseId:_this.caseId
				}
				if(_this.tag=='lawyer'){
					tags = 'lawyers'
					data.lawyerIds = ids
				}else{
					tags = 'users'
					data.userIds = ids
				}
				uni.showLoading({
					title:'正在提交数据...'
				})
				const res = await _this.$myRequest({
					url: `/${_this.roleUrl}/caseUser/${tags}/0`,
					data: data,
					method: 'POST', //默认是GET
				})
				uni.hideLoading()
				
				if(res.data.code==200){
					uni.showToast({
						title:'提交成功',
						icon:"success"
					})
					uni.navigateBack({
						delta:-1
					})
				}
				
				
			},
		}
	}
</script>
<style>
	page{
		background-color: #ffffff;
	}
</style>
<style scoped lang="scss">
	.title{
		font-size: 28rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 550;
		color: #333333;
	}
	.star{
		color: #FF6132;
	}
	.line{
		height: 1rpx;
		background-color: #eeeeee;
	}
	.placeholder-view{
		width: 430rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		margin-left: auto;
		text-align: right;
	}
	.listview {
		display: flex;
		flex-wrap: wrap;
		padding-bottom: 32rpx;
	
	}
	
	.main_item {
		width: 336rpx;
		height: 88rpx;
		background: #E8F7FB;
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		margin-top: 16rpx;
	}
	
	.main_item2 {
		width: 336rpx;
		height: 88rpx;
		background: #E8F7FB;
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		margin-top: 16rpx;
		margin-left: 14rpx;
	}
	.listview-name {
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
	}
	.laywer-sel-popup{
		height: 330rpx;
		width: 686rpx;
		background: #FFFFFF;
		box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.2);
		border-radius: 2px;
	}
	
	.view-bottom {
		position: fixed;
		width: 100%;
		bottom: 0;
		background-color: #ffffff;
		border-top: 1px solid #E1E1E1;
		padding-bottom: env(safe-area-inset-bottom); // 适配iphoneX的底部
	}
	
	.view-bottom-s {
		height: 108rpx;
		display: flex;
		align-items: center;
	}
	.view-bottom-b {
		width: 686rpx;
		height: 88rpx;
		background: #2DA9C5;
		border-radius: 58rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 36rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #E8F7FB;
		line-height: 50rpx;
		margin-left: 32rpx;
	}
</style>